<template>
  <div class="box">
    <div class="top">
      <p class="title">实时用户统计</p>
      <p class="bg"></p>
      <p class="right">
        系统用户总量
        {{ total }}
        人
      </p>
    </div>
    <div class="number">
      <span v-for="(item, index) in people" :key="index">{{ item }}</span>
    </div>

    <div class="charts">
      <h2 style="font-size: 20px; text-align: center; line-height: 30px">
        消费数据统计
      </h2>
      <div class="chart">
        <div class="chart-title">
          <p class="money">
            <span style="color: #eacc00; font-family: 'Agency FB', emoji">
              {{ money }}.00
            </span>
          </p>
          <p class="bg">消费总金额</p>
        </div>

        <div class="chart-title">
          <p class="money">
            <span>{{ sum }}</span>
          </p>
          <p class="bg">消费总笔数</p>
        </div>
        <div class="chart-title">
          <p class="money">
            <span>{{ todayMoney }}.00</span>
          </p>
          <p class="bg">今日消费额</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import 'echarts-liquidfill'
import { ref, onMounted } from 'vue'
import { reqTotalMoney, reqTotalUser, ReqUserAndTodayMoney } from '@/api/screen'
import { screenData } from '@/api/screen/tyde.ts'

let people = ref<string>()
let total = ref<number>()
let money = ref<number>(34748)
let todayMoney = ref<number>()
let sum = ref<number>()
onMounted(() => {
  // init()
  getTotalUser()
  totalMoney()
  userAndTodayMoney()
})
const getTotalUser = async () => {
  let result: screenData = await reqTotalUser()
  if (result.code === 200) {
    total.value = result.data.total
    //people 为一个字符串,不够7位,需要补0
    if (result.data.total < 10) {
      people.value = '000000' + result.data.total
    } else if (result.data.total < 100) {
      people.value = '00000' + result.data.total
    } else if (result.data.total < 1000) {
      people.value = '00000' + result.data.total
    }
  }
}
const totalMoney = async () => {
  let result: screenData = await reqTotalMoney()
  money.value = result.data.amount
}
const userAndTodayMoney = async () => {
  let result: any = await ReqUserAndTodayMoney()
  if (result.code === 200) {
    todayMoney.value = result.data.money
    sum.value = result.data.num
  }
}
</script>

<style scoped lang="scss">
.box {
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;

  .top {
    margin-left: 20px;

    .title {
      color: white;
      font-size: 20px;
    }

    .bg {
      width: 68px;
      height: 7px;
      background: url(../../images/dataScreen-title.png) no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }

    .right {
      float: right;
      color: white;
      font-size: 20px;

      span {
        color: yellowgreen;
      }
    }
  }

  .number {
    padding: 10px;
    margin-top: 30px;
    display: flex;

    span {
      flex: 1;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background: url(../../images/total.png) no-repeat;
      background-size: 100% 100%;
      color: #29fcff;
    }
  }

  .charts {
    color: white;
    width: 100%;
    height: 270px;

    .chart {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;

      .chart-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        margin-top: 20px;

        .money {
          margin-bottom: 20px;
          font-size: 45px;
        }

        .bg {
          font-size: 15px;
          color: #cccccc;
        }
      }
    }
  }
}
</style>
